<template>
  <van-popup v-model="show"
             position="left"
             :style="{ height: '100%',width:'100%' }"
             class="authentication-content">
    <!-- 公共头 -->
    <header class="header-fiexed">
      <van-nav-bar title="身份验证"
                   left-arrow
                   @click-left="$router.go(-1)" />
    </header>
    <van-form class="login-form"
              @submit="onSubmit">
      <van-cell-group>
        <van-field v-model="captcha"
                   name="captcha"
                   placeholder="请输入验证码"
                   :rules="[{ required: true, message: '请输入验证码' }]"
                   clearable>
          <van-button slot="button"
                      size="small"
                      type="default"
                      class="send-sms"
                      native-type="button"
                      :disabled="this.waitTime < 60"
                      @click="sendCode">{{smsBtnText}}</van-button>
        </van-field>
      </van-cell-group>

      <van-button type="default"
                  class="login-btn"
                  native-type="submit"
                  round
                  block
                  :disabled="captcha === ''">验证</van-button>
    </van-form>

  </van-popup>
</template>

<script>
import { authCode, checkAuthCode } from '@/api/common'
import { mapState } from 'vuex'
import { Dialog } from 'vant'
export default {
  name: 'Authentication',
  data() {
    return {
      show: true,
      captcha: '',
      waitTime: 60
    }
  },
  computed: {
    ...mapState({
      member_mobilebind: state => state.user.info.member_mobilebind
    }),
    smsBtnText() {
      return this.waitTime < 60 ? this.waitTime : '获取验证码'
    }
  },
  created() {
    if (this.member_mobilebind === 0) {
      Dialog.confirm({
        title: '您尚未绑定手机',
        message: '是否前往绑定手机后继续进行后续的操作？'
      })
        .then(() => {
          this.$router.push({ name: 'BindMobile' })
        })
        .catch(() => {})
    }
  },
  methods: {
    sendCode() {
      if (this.member_mobilebind === 0) {
        Dialog.confirm({
          title: '您尚未绑定手机',
          message: '是否前往绑定手机后继续进行后续的操作？'
        })
          .then(() => {
            this.$router.push({ name: 'BindMobile' })
          })
          .catch(() => {})
        return false
      }
      // 验证手机号
      authCode('mobile')
        .then(res => {
          this.$toast({
            type: 'success',
            message: '发送成功',
            duration: 3000
          })
          let interval = setInterval(() => {
            if (this.waitTime === 0) {
              clearInterval(interval)
              this.waitTime = 60
            } else this.waitTime--
          }, 1000)
        })
        .catch(res => {
          this.$toast({
            type: 'loading',
            message: res.message,
            duration: 3000
          })
        })
    },
    /**
     * 提交验证
     */
    onSubmit() {
      checkAuthCode(this.captcha)
        .then(res => {
          this.$toast({
            type: 'success',
            message: '验证成功'
          })
          this.show = false
        })
        .catch(res => {
          // TODO 注释强行show
          // this.show = false
          this.$toast({
            type: 'loading',
            message: res.message || '验证失败，请重试'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.authentication-content {
  .login-form {
    font-size: 18px;
    padding: 0 20px;
    .login-btn {
      width: 100%;
      height: 44px;
      margin-top: 30px;
      background-color: #000000;
      color: #fbc491;
      font-size: 16px;
      &.van-button--disabled {
        opacity: 1;
        background-color: #f4f4f4;
        color: #666666;
      }
    }
    .send-sms {
      border-color: transparent transparent transparent #e5e5e5;
      color: #999999;
      font-size: 16px;
      height: 100%;
    }
  }
}
</style>
